<template>
	<transition name="fade">
		<aside class="users" v-if="modifyType == null">
			<div class="pu">
				<p class="photo">
					<span class="lf">个人头像</span>
					<img class="rf" src="../assets/images/user.jpg" />
					<!-- 单击头像，修改用户头像 -->
					<input type="file" name="" accept="image/png,image/jpeg,image/jpg,image/gif">
				</p>
		
				<p class="tel disable">
					<span class="lf">手机号码</span>
					<span class="rf">133****1981</span>
				</p>
				
				<p class="nickname" @click="modifyField('nickname')">
					<span class="lf">昵称</span>
					<span class="rf">{{nickName}}</span>
				</p>
		
				<p class="sex" @click="modifyField('sex')">
					<span class="lf">性别</span>
					<span class="rf">{{sex_display}}</span>
				</p>
		
				<p class="email"  @click="modifyField('email')">
					<span class="lf">邮箱</span>
					<span class="rf">{{email_secure}}</span>
				</p>
				<a href="/modify">
					<p class="password">
						<span class="lf">修改密码</span>
					</p>
				</a>
			</div>
		</aside>
	</transition>
	
	<transition name="user">
		<!-- 修改 昵称的 窗口 -->
		<aside class="modify-win nickname" v-if="modifyType === 'nickname'">
			<div class="title"><i @click="modifyType = null"></i>修改-昵称</div>
			<div class="content">
				<input type="text"  v-model="nickName">
				<button>确定修改</button>
			</div>
		</aside>
	</transition>
	
	<transition name="user">
		<!-- 修改 性别的 窗口 -->
		<aside class="modify-win sex" v-if="modifyType === 'sex'">
			<div class="title"><i @click="modifyType = null"></i>修改-性别</div>
			<div class="content">
				<input type="radio" name="sex" value="m" v-model="sex" id="c-sex-m"><label for="c-sex-m">男</label>
				<input type="radio" name="sex" value="f" v-model="sex" id="c-sex-f"><label for="c-sex-f">女</label>
				<input type="radio" name="sex" value="s" v-model="sex" id="c-sex-s"><label for="c-sex-s">保密</label>
				<button>确定修改</button>
			</div>
		</aside>
	</transition>
	
	<transition name="user">
		<!-- 修改 邮箱的 窗口 -->
		<aside class="modify-win email" v-if="modifyType === 'email'">
			<div class="title"><i @click="modifyType = null"></i>修改-邮箱</div>
			<div class="content">
				<input type="text" name="" value="" placeholder="请输入原注册的邮箱">
				<input type="text" name="" value="" placeholder="请输入新的邮箱">
				<button>确定修改</button>
			</div>
		</aside>
	</transition>
</template>

<script>

export default {
	props: {
		user: {
			type: Object, 
			required: true ,
		}
	}, 
	data() {
		return {
			modifyType: null , // 要修改的属性
			nickName: this.user.nickName , 
			sex: this.user.sex , 
			email: this.user.email ,
		}
	},
	methods: {
		modifyField(type) {
			this.modifyType = type ;
		}
	}, 
	computed: {
		sex_display() {
			return this.sex === "m" ? "男" :  this.sex === "f" ? "女" : "保密" ; 
		},
		email_secure() {
			return "****" + this.email.substring(this.email.indexOf("@")) ; 
		}
	}
}
</script>

<style>
.user-enter-active, .fade-enter-active{
	transition: all .3s linear;
}

.user-enter-from {
	transform: translateX(250px);
}

.fade-enter-from {
	transform: translateX(-250px);
}
</style>